
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Login Page | Matrimony Premium Admin Template</title>
        <link rel="stylesheet" href="css/style.css" type="text/css" />
        <script type="text/javascript" src="js/plugins/jquery-1.7.min.js"></script>
        <script type="text/javascript" src="js/plugins/jquery-ui-1.8.16.custom.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('.loginform button').hover(function() {
                    $(this).stop().switchClass('default', 'hover');
                }, function() {
                    $(this).stop().switchClass('hover', 'default');
                });

                $('#login').submit(function() {
                    var u = jQuery(this).find('#username');
                    if (u.val() == '') {
                        jQuery('.loginerror').slideDown();
                        u.focus();
                        return false;
                    }
                });

                $('#username').keypress(function() {
                    jQuery('.loginerror').slideUp();
                });
            });
        </script>
        <!--[if lt IE 9]>
                <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
        <![endif]-->
    </head>

    <body class="login">

        <div class="loginbox radius3">
            <div class="loginboxinner radius3">
                <div class="loginheader">
                    <h1 class="bebas">Sign In</h1>
                    <div class="logo"><img src="images/starlight_admin_template_logo.png" alt="" /></div>
                </div><!--loginheader-->

                <div class="loginform">
                    <f:view>
                        <h:form>
                            <div class="loginerror"><p>Invalid username or password</p></div>

                            <p>
                                <label for="username" class="bebas">Username</label>
                                <h:inputText value="#{loginBean.username}" class="radius2" id="username" required="true" requiredMessage="Please enter userName"/>
                                 <p class="help-block"></p>
                                        <h:message for="username" errorStyle="color:red"/>   
                            </p>
                            <p>
                                <label for="password" class="bebas">Password</label>
                                <h:inputSecret value="#{loginBean.password}" class="radius2" id="password" required="true" requiredMessage="Please enter Password"/>
                            </p> <p class="help-block"></p>
                                        <h:message for="password" errorStyle="color:red"/>   
                            <p> <h:outputText value="#{loginBean1.errorMessage}" style="color: red; font-size: smaller"/> </p>                          
                            <p>
                                <h:commandButton action="#{loginBean.checkLogin()}" value="Sign in" class="radius3 bebas"/>
                            </p>

                        </h:form>


                    </f:view>
                </div><!--loginform-->
            </div><!--loginboxinner-->
        </div><!--loginbox-->

    </body>

</html>
